<template>
  <div class="footerPlayer">
    <div class="footerLeft" @click="updateDetailSHow">
      <img :src="defaultCover" alt="">
      <!-- <img :src="playList[playListIndex].picUrl" alt=""> -->

      <div>
        <p>{{ playList[playListIndex].name }}</p>
        <span>横向滑动切换歌曲</span>
      </div>
    </div>
    <div class="footerRight">
      <svg class="icon" aria-hidden="true" @click="changePlayStatus()" v-if="playStatus">
        <use xlink:href="#icon-zanting"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="changePlayStatus()" v-else>
        <use xlink:href="#icon-bofang"></use>
      </svg>

      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-zu"></use>
      </svg>
    </div>
    <audio ref="audioPlayer"
      :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"></audio>
    <van-popup v-model:show="detailShow" position="bottom" :style="{ height: '100%', width: '100%' }">
      <play-detail :musicMessage="playList[playListIndex]" :changePlayStatus="changePlayStatus" :playStatus="playStatus"
        :addDuration="addDuration"></play-detail>
    </van-popup>

  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import PlayDetail from './PlayDetail.vue'
export default {
  components: { PlayDetail },

  data() {
    return {
      interval: null,
      defaultCover: 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg'
    }
  },

  computed: {
    ...mapState(['playList', 'playListIndex', 'playStatus', 'detailShow', 'isFooterPlayerShow']),

  },

  mounted() {
    this.$store.dispatch('getLyric', this.playList[this.playListIndex].id)
    this.updateTime()
    console.log(this.playList);
  },

  updated() {
    this.$store.dispatch('getLyric', this.playList[this.playListIndex].id)
  },

  methods: {
    changePlayStatus() {
      // 判断一下播放状态(如果是暂停的话)
      if (this.$refs.audioPlayer.paused) {
        this.$refs.audioPlayer.play()
        this.updatePlayStatus(true)
        this.updateTime() //播放的时候，调用函数传递当前的currentTime
      } else {
        this.$refs.audioPlayer.pause()
        this.updatePlayStatus(false)
        clearInterval(this.interval) //暂停的时候清除定时器
      }
    },
    // 获得当前音乐播放的currentTIme
    updateTime() {
      this.interval = setInterval(() => {
        this.updateCurrentTime(this.$refs.audioPlayer.currentTime)
        this.addDuration()
      }, 1000)
    },
    // 更新当前音乐的进度
    addDuration() {
      this.updateDuration(this.$refs.audioPlayer.duration)
    },
    ...mapMutations(['updatePlayStatus', 'updateDetailSHow', 'updateCurrentTime', 'updateDuration']),

  },

  watch: {
    playListIndex() {
      // 监听歌单歌曲下标的改变，如果改变了，就自动播放歌曲
      this.$refs.audioPlayer.autoplay = true
      // 检测一下播放状态，改变一下播放暂停图标
      if (this.$refs.audioPlayer.paused) {
        this.updatePlayStatus(false)
      } else {
        this.updatePlayStatus(true)
      }
    },
    // 直接监视下标还是有问题：
    // 如果进入一个歌单，点击的是第一首，下标还是0，那么就不会自动播放了
    // 所以这里要监视一下，歌单的变化
    playList: {
      deep: true,
      handler() {
        if (!this.playStatus) {
          this.$refs.audioPlayer.autoplay = true;
          this.updatePlayStatus(false)
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
.footerPlayer {
  padding: 0 15px;
  position: fixed;
  bottom: 0px;
  width: 100%;
  min-height: 1rem;
  background-color: white;
  box-shadow: 2px 0px 10px 1px rgba(228, 228, 228, 0.898);
  display: flex;
  justify-content: space-between;
  align-items: center;

  .footerLeft {
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center;

    img {
      width: 35px;
      height: 35px;
      border-radius: 200px;
      margin-right: 15px;
    }

    p {
      font-size: 15px;
      width: 200px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      // color: #34D79B;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    span {
      font-size: 12px;
      color: gray;
    }
  }

  .footerRight {
    display: flex;
    align-items: center;

    .icon {
      width: .8rem;
      height: .8rem;

      &:last-child {
        width: .6rem;
        height: .6rem;
        margin-left: 10px;
      }
    }
  }
}
</style>